<template>
	<view v-show="load">
		<scroll-view scroll-y>
			<view class="scroll">
				<view class="detail_status" v-if="orderDetail.status==0||orderDetail.status==7">
					<image class="detail_status_img" src="../../static/img/123.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">等待您的付款</view>
						<view class="detail_text_2">
							剩余 <view class="detail_text_3">{{min}}</view> 分 <view class="detail_text_3">{{sec}}</view> 秒将自动关闭
						</view>
					</view>
				</view>
				<view class="detail_status" v-if="orderDetail.status==1">
					<image class="detail_status_img" src="../../static/img/567.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">我们正为您备货中</view>
					</view>
				</view>
				<view class="detail_status" v-if="orderDetail.status==2">
					<image class="detail_status_img" src="../../static/img/345.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">正马不停蹄的为您赶来</view>
					</view>
				</view>
				<view class="detail_status" v-if="orderDetail.status==3">
					<image class="detail_status_img" src="../../static/img/789.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">我们期待您的评价</view>
					</view>
				</view>
				<view class="detail_status" v-if="orderDetail.status==4">
					<image class="detail_status_img" src="../../static/img/911.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">感谢您信任,期待您的再次光临</view>
					</view>
				</view>
				<view class="detail_status" v-if="orderDetail.status==6">
					<image class="detail_status_img" src="../../static/img/102.png"></image>
					<view class="detail_status_text">
						<view class="detail_text_1">该订单已关闭</view>
					</view>
				</view>


				<view v-if="orderDetail.courierInfo!=null" class="detail_address" style="margin-bottom: 30upx;" @tap="goCourier">
					<image src="../../static/icon/wuwu.png" style="width: 40upx;height: 40upx;"></image>
					<view style="flex: 1;flex-direction: column;margin:0 30upx;">
						<view style="color: #409EFF;" class="text_two">
							{{orderDetail.courierInfo.message}}
						</view>
						<view style="color: #888888;margin-top: 20upx;font-size: 26upx;">
							{{orderDetail.courierInfo.time}}
						</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>

				<view class="detail_address">
					<uniIcon type='location-filled' color="#FE0036"></uniIcon>
					<view class="detail_address_detail">
						<view class="detail_address_name">
							<view style="color: #333333;">{{orderDetail.receiveName}}</view>
							<view style="color: #555555;margin-left: 30upx;">{{orderDetail.receivePhone}}</view>
						</view>
						<view style="color: #888888;margin-top: 20upx;font-size: 26upx;">
							{{orderDetail.province+' '+orderDetail.city+' '+ orderDetail.area+' '+orderDetail.address}}
						</view>
					</view>
				</view>
				<view class="detail_address margin">
					<view class="product_title">
						<view class="virtul"></view>
						<view style="margin-left: 10upx;color: #333333;font-size: 30upx;">商品信息</view>
					</view>
					<view class="pro_view">
						<view v-for="item in orderDetail.orderItems" :key="item.id" class="pro_item">
							<image :src="item.image" class="pro_img"></image>
							<view class="pro_detail">
								<view class="pro_name">
									<view class="pro_name_text1">{{item.productName}}</view>
									<view class="pro_name_text2">￥{{item.price}}</view>
								</view>
								<view class="pro_name">
									<view class="pro_name_text3">{{item.skuName}}</view>
									<view class="pro_name_text4">x {{item.count}}</view>
								</view>

							</view>
						</view>
						<view style="width: 100%;justify-content: flex-end;" v-if="orderDetail.refundButton==0">
							<view @tap="goRefund(orderDetail.id,orderDetail.actualAmount,orderDetail.status)" style="border:1px solid #888888;border-radius: 50upx;padding: 8upx 15upx;color: #888888;font-size: 24upx;">申请退款</view>
						</view>
					</view>
				</view>
				<view class="detail_address margin">
					<view class="product_title">
						<view class="virtul"></view>
						<view style="margin-left: 10upx;color: #333333;font-size: 30upx;">订单信息</view>
					</view>
					<view class="amout">
						<view class="amount_view">
							<view style="color: #555555;">商品合计</view>
							<view style="color: #333333;">￥{{orderDetail.totalAmount}}</view>
						</view>
						<view class="amount_view">
							<view style="color: #555555;">优惠金额</view>
							<view style="color: #333333;">￥{{orderDetail.preferentialAmount}}</view>
						</view>
						<view class="amount_view">
							<view style="color: #555555;">快递金额</view>
							<view style="color: #333333;">￥{{orderDetail.freight}}</view>
						</view>
						<view class="amount_view">
							<view style="color: #555555;">实付金额</view>
							<view style="color: #333333;">￥{{orderDetail.actualAmount}}</view>
						</view>
					</view>
				</view>
				<view class="detail_address margin">
					<view class="amout">
						<view class="basic_view">
							<view style="color: #555555;">订单编号</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.orderNo}}</view>
							<view class="copy" @tap="copyOrderNo(orderDetail.orderNo)">复制</view>
						</view>
						<view class="basic_view" v-if="orderDetail.remark!=null">
							<view style="color: #555555;">订单备注</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.remark}}</view>
						</view>
						<view class="basic_view">
							<view style="color: #555555;">支付方式</view>
							<view style="color: #555555;margin-left: 20upx;">微信支付</view>
						</view>
						<view class="basic_view">
							<view style="color: #555555;">创建时间</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.createTime}}</view>
						</view>
						<view class="basic_view" v-if="orderDetail.payTime!=null">
							<view style="color: #555555;">支付时间</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.payTime}}</view>
						</view>
						<view class="basic_view" v-if="orderDetail.sendTime!=null">
							<view style="color: #555555;">发货时间</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.sendTime}}</view>
						</view>
						<view class="basic_view" v-if="orderDetail.receiveTime!=null">
							<view style="color: #555555;">收货时间</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.receiveTime}}</view>
						</view>
						<view class="basic_view" v-if="orderDetail.closeTime!=null">
							<view style="color: #555555;">关闭时间</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.closeTime}}</view>
						</view>
						<view class="basic_view" v-if="orderDetail.successTime!=null">
							<view style="color: #555555;">交易完成</view>
							<view style="color: #555555;margin-left: 20upx;">{{orderDetail.successTime}}</view>
						</view>

					</view>
				</view>

			</view>
		</scroll-view>
		<view class="bottom" v-if="orderDetail.status==0||orderDetail.status==7">
			<view class="bottom_left">支付金额 <view style="margin-left: 15upx;color: #FE0036;font-size: 32upx;font-weight: 600;">￥{{orderDetail.actualAmount}}</view>
			</view>
			<view class="bt_red">立即支付</view>
		</view>
		<view class="bottom" v-else-if="orderDetail.status==1">
			<view class="bottom_left">已支付 <view style="margin-left: 15upx;color: #FE0036;font-size: 32upx;font-weight: 600;">￥{{orderDetail.actualAmount}}</view>
			</view>
			<view class="bt_groy" style="color: #555555;border:1px solid #555555;">提醒发货</view>
		</view>
		<view class="bottom" v-else-if="orderDetail.status==2">
			<view class="bottom_left">已支付 <view style="margin-left: 15upx;color: #FE0036;font-size: 32upx;font-weight: 600;">￥{{orderDetail.actualAmount}}</view>
			</view>
			<view class="bt_red" @tap="receive">确认收货</view>
		</view>
		<view class="bottom" v-else-if="orderDetail.status==3">
			<view class="bottom_left">已支付 <view style="margin-left: 15upx;color: #FE0036;font-size: 32upx;font-weight: 600;">￥{{orderDetail.actualAmount}}</view>
			</view>
			<view class="bt_red" @tap="comment">评价</view>
		</view>
		<view class="bottom" v-else-if="orderDetail.status==4">
			<view class="bottom_left">已支付 <view style="margin-left: 15upx;color: #FE0036;font-size: 32upx;font-weight: 600;">￥{{orderDetail.actualAmount}}</view>
			</view>
			<view class="bt_groy" @tap="queryComment()">查看评价</view>
		</view>
		<view class="bottom" v-else-if="orderDetail.status==6">
			<view class="bottom_left"></view>
			<view class="bt_groy" @tap="delOrder">删除订单</view>
		</view>
	</view>


</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import api from '../../common/api.js';
	import {
		getWithParam_
	} from '../../common/request.js';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				orderId: null,
				load: false,
				min: '00',
				sec: '00',
				orderDetail: {}
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getOrderDetail(option.id)
		},
		methods: {
			delOrder() {
				var that = this
				uni.showModal({
					title: '',
					content: '是否删除订单',
					success: function(res) {
						if (res.confirm) {
							getWithParam_(api.ORDER_DELETE, {
								orderId: that.orderId
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "删除成功",
								})
								uni.navigateTo({
									url: "../order/list?type=null"
								})
							})
						}
					}
				});
			},
			comment() {
				uni.navigateTo({
					url: "./comment?id=" + this.orderId
				})
			},
			receive() {
				var that = this
				uni.showModal({
					title: '',
					content: '是否确认收货',
					success: function(res) {
						if (res.confirm) {
							getWithParam_(api.ORDER_RECEIVE, {
								orderId: that.orderId
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "操作成功",
								})
								uni.navigateTo({
									url: "./detail?id=" + that.orderId
								})
							})
						}
					}
				});
			},
			queryComment() {
				uni.navigateTo({
					url: "./commentDetail?orderId=" + this.orderId
				})
			},
			goCourier() {
				uni.navigateTo({
					url: "./courier?id=" + this.orderId
				})
			},
			copyOrderNo(orderNo) {
				uni.setClipboardData({
					data: orderNo
				})
			},

			goRefund(id, amount, status) {
				uni.navigateTo({
					url: "./refund?id=" + id + "&amount=" + amount + "&status=" + status
				})
			},
			executor(min, sec) {
				let time = setInterval(() => {
					sec = sec - 1
					if (sec == -1) {
						min = min - 1
						sec = 59
						if (min == -1) {
							sec = 0
							min = 0
							clearInterval(time)
						}
					}
					this.sec = sec < 10 ? '0' + sec : sec
					this.min = min < 10 ? '0' + min : min
				}, 1000)
			},
			getOrderDetail(orderId) {
				getWithParam_(api.ORDER_DETAIL, {
					orderId
				}).then(res => {
					this.orderDetail = res.data
					if (res.data.status == 0 || res.data.status == 7) {
						var s = res.data.second
						var min = parseInt(s / 60)
						var sec = s % 60
						this.sec = sec < 10 ? '0' + sec : sec
						this.min = min < 10 ? '0' + min : min
						this.executor(min, sec)
					}
					this.load = true

				})
			}
		}
	}
</script>

<style>
	.copy {
		border: 2upx solid #888888;
		color: #888888;
		padding: 5upx 15upx;
		border-radius: 30upx;
		font-size: 24upx;
		margin-left: 30upx;
	}

	.bottom_left {
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.bt_red {
		font-weight: 600;
		color: #FE0036;
		border: 1px solid #FE0036;
		border-radius: 60upx;
		margin-right: 30upx;
		width: 140upx;
		height: 60upx;
		align-items: center;
		justify-content: center;
	}

	.bt_groy {
		font-weight: 600;
		color: #555555;
		border: 1px solid #555555;
		border-radius: 60upx;
		margin-right: 30upx;
		width: 140upx;
		height: 60upx;
		align-items: center;
		justify-content: center;

	}

	.bottom {
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		border-top: 1px solid #F2F3F5;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.scroll {
		flex-direction: column;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #F2F3F5;
	}

	scroll-view {
		width: 100%;
		height: calc(100vh - 100upx);
	}

	.basic_view {
		height: 60upx;
		align-items: center;
	}

	.amout {
		flex-direction: column;
		width: 100%;
		padding-top: 10upx;
	}

	.amount_view {
		justify-content: space-between;
		height: 60upx;
		align-items: center;
	}

	.pro_name_text4 {
		color: #888888;
	}

	.pro_name_text3 {
		color: #888888;
		width: 320upx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pro_item {
		padding: 20upx 10upx;
		box-sizing: border-box;
	}

	.pro_name_text2 {
		color: #333333;
		font-size: 32upx;
	}

	.pro_name_text1 {
		color: #333333;
		width: 320upx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.pro_name {
		justify-content: space-between;
		margin-left: 30upx;
		margin-top: 10upx;
	}

	.pro_view {
		flex-direction: column;
		width: 100%;
	}

	.pro_detail {
		flex: 1;
		flex-direction: column;
	}

	.pro_img {
		width: 150upx;
		height: 150upx;
	}

	.margin {
		margin-top: 30upx;
		flex-direction: column;
	}

	.product_title {
		width: 100%;
		align-items: center;
		padding-bottom: 20upx;
		border-bottom: 1px solid #F5F5F5;
	}

	.virtul {
		width: 3px;
		height: 30upx;
		background-color: #FE0036;
	}

	.detail_address_detail {
		flex-direction: column;
		margin-left: 30upx;
	}


	.detail_address {
		width: 100%;
		border-radius: 20upx;
		background-color: #FFFFFF;
		align-items: center;
		padding: 20upx;
		box-sizing: border-box;
	}

	.detail_text_3 {
		width: 50upx;
		height: 50upx;
		align-items: center;
		justify-content: center;
		border-radius: 50upx;
		background-color: #FE0036;
		color: #FFFFFF;
		margin: 0 10upx;

	}

	.detail_status_text {
		flex-direction: column;
		margin-left: 20upx;
	}

	.detail_status {
		width: 100%;
		padding-bottom: 20upx;
		align-items: center;
	}

	.detail_text_1 {
		color: #303133;
		font-size: 32upx;
		font-weight: 600;
	}

	.detail_text_2 {
		margin-top: 10upx;
		color: #909399;
		font-size: 26upx;
		align-items: center;
	}

	.detail_status_img {
		width: 120upx;
		height: 120upx;
	}
</style>
